<template>
  <div class="equipmentOption">
    <div class="equipmentOption_treeBg">
      <MetaTreeList title-size="20" title="设备" :maxWidth="300" :icon="treeIcon" :default-props="defaultProps" :tree-data="equTreeData" @treeItemChoose="roloeItemChoose"></MetaTreeList>
    </div>
    <div class="equipmentOption_infoBg">
      <div v-if="Object.keys(roleInfoItem).length > 0" class="equipmentOption_info">
        <div class="equipmentO_infoTitleBg">
          <div class="equipmentO_infoTitle">设备信息</div>
          <div class="equipmentO_infoContent">
            <div class="equipmentO_infoItemBg">
              <img src="@/assets/images/v3/eInfo_showName.png" class="equipmentO_infoItemIconShowName">
              <div class="equipmentO_infoItemText">用户设备名称&nbsp;&nbsp;{{ roleInfoItem.customizeName && roleInfoItem.customizeName !== '' ? roleInfoItem.customizeName : roleInfoItem.equipmentname }}</div>
            </div>
            <div class="equipmentO_infoItemBg">
              <img src="@/assets/images/v3/eInfo_name.png" class="equipmentO_infoItemIconName">
              <div class="equipmentO_infoItemText">设备名称&nbsp;&nbsp;{{ roleInfoItem.alias }}</div>
            </div>
            <div class="equipmentO_infoItemBg">
              <img src="@/assets/images/v3/eInfo_snid.png" class="equipmentO_infoItemIconSnid">
              <div class="equipmentO_infoItemText">设备sn号&nbsp;&nbsp;{{ roleInfoItem.snid }} (v{{ roleInfoItem.version }})</div>
            </div>
            <div class="equipmentO_infoItemBg">
              <!-- 1在线2调试3维修4报警 -->
              <img src="@/assets/images/v3/eInfo_snid.png" class="equipmentO_infoItemIconSnid">
              <div v-if="equipmentOnType == '2'" class="equipmentO_infoItemText">设备状态&nbsp;&nbsp;调试</div>
              <div v-else-if="equipmentOnType == '3'" class="equipmentO_infoItemText">设备状态&nbsp;&nbsp;维修
                <span v-if="parseFloat(roleInfoItem.version) >= 3 && equipmentStatusNow == '20' && xmStatus == '10'">（休眠唤醒中）</span>
                <span v-else-if="parseFloat(roleInfoItem.version) >= 3 && equipmentStatusNow == '20' && xmStatus == '20'">（休眠充电中）</span>
              </div>
              <div v-else-if="equipmentOnType == '4'" class="equipmentO_infoItemText">设备状态&nbsp;&nbsp;报警
                <span v-if="parseFloat(roleInfoItem.version) >= 3 && equipmentStatusNow == '20' && xmStatus == '10'">（休眠唤醒中）</span>
                <span v-else-if="parseFloat(roleInfoItem.version) >= 3 && equipmentStatusNow == '20' && xmStatus == '20'">（休眠充电中）</span>
              </div>
              <div v-else class="equipmentO_infoItemText">设备状态&nbsp;&nbsp;在线
                <span v-if="parseFloat(roleInfoItem.version) >= 3 && equipmentStatusNow == '20' && xmStatus == '10'">（休眠唤醒中）</span>
                <span v-else-if="parseFloat(roleInfoItem.version) >= 3 && equipmentStatusNow == '20' && xmStatus == '20'">（休眠充电中）</span>
              </div>
            </div>
            <div class="equipmentO_infoItemBg">
              <img src="@/assets/images/v3/eInfo_snid.png" class="equipmentO_infoItemIconSnid">
              <div class="equipmentO_infoItemText">设备电量&nbsp;&nbsp;{{ equipmentVoltage !== '' ? equipmentVoltage : '-' }}V
              </div>
            </div>
            <div class="equipmentO_infoItemBg">
              <img src="@/assets/images/v3/eInfo_snid.png" class="equipmentO_infoItemIconSnid">
              <!-- 1连续采集关，2连续采集开，3样品采集，4暗电流，5标准板，6定时关，7定时开 -->
              <div v-if="collectionType == '2'" class="equipmentO_infoItemText">采集状态&nbsp;&nbsp;连续采集</div>
              <div v-else-if="collectionType == '3'" class="equipmentO_infoItemText">采集状态&nbsp;&nbsp;样品采集</div>
              <div v-else-if="collectionType == '4'" class="equipmentO_infoItemText">采集状态&nbsp;&nbsp;暗电流定标</div>
              <div v-else-if="collectionType == '5'" class="equipmentO_infoItemText">采集状态&nbsp;&nbsp;标准板定标</div>
              <div v-else-if="collectionType == '7'" class="equipmentO_infoItemText">采集状态&nbsp;&nbsp;定时采集</div>
              <div v-else class="equipmentO_infoItemText">采集状态&nbsp;&nbsp;待机</div>
            </div>
            <div v-if="collectionType == '7' && workModel == '03'" class="equipmentO_infoItemBg">
              <img src="@/assets/images/v3/eInfo_snid.png" class="equipmentO_infoItemIconSnid">
              <div v-if="realWorkModel == '10'" class="equipmentO_infoItemText">当前采集模式&nbsp;&nbsp;半休眠模式</div>
              <div v-else-if="realWorkModel == '20'" class="equipmentO_infoItemText">当前采集模式&nbsp;&nbsp;全休眠模式（采集）</div>
              <div v-else-if="realWorkModel == '30'" class="equipmentO_infoItemText">当前采集模式&nbsp;&nbsp;全休眠模式（待机）</div>
              <div v-else class="equipmentO_infoItemText">当前采集模式&nbsp;&nbsp;-</div>
            </div>
          </div>
        </div>
        <div class="equipmentO_optionArea">
          <div class="equipmentO_optionTitle">设备操作系统</div>
          <div class="equipmentO_optionBg">
            <img v-if="btnClickType === 'params'" class="equipmentOParams_leftLine" src="@/assets/images/v3/leftLine.png">
            <img v-if="btnClickType === 'ds'" class="equipmentOParams_rightDsLine" src="@/assets/images/v3/rightLine_up.png">
            <img v-if="btnClickType === 'adl'" class="equipmentOParams_rightAdlLine" src="@/assets/images/v3/rightLine_down.png">
            <img v-if="btnClickType === 'bzb'" class="equipmentOParams_rightBzbLine" src="@/assets/images/v3/rightLine_downUp.png">
            <img v-if="btnClickType === 'dc'" class="equipmentOParams_rightDcLine" src="@/assets/images/v3/rightLine_dc.png">
            <div class="equipmentO_equipmentParams">
              <div :class="btnClickType == 'params' ? 'equipmentOParams_bg equipmentOParams_bgImg_o': 'equipmentOParams_bg equipmentOParams_bgImg'">
                <div class="equipmentOParams_title">设备参数<i v-if="btnClickType == 'params'" class="el-icon-refresh equipmentOParams_refreshIcon" @click="equipmentParamsRefresh"></i></div>
                <div class="equipmentOParams_itemBg">
                  <div class="equipmentOParams_itemTitle">可见光积分</div>
                  <MetaNumberInput :disabled="btnClickType !== 'params'" :min="0" :max="255" unit="ms" paramKey="visible_light_integral" :num="equipmentParams.visible_light_integral" @numberInputValueChange="numberInputValueChange"></MetaNumberInput>
                </div>
                <div class="equipmentOParams_itemBg">
                  <div class="equipmentOParams_itemTitle">补光灯电压</div>
                  <MetaNumberInput :disabled="btnClickType !== 'params'" :min="1" :max="5" :precision="1" unit="V" paramKey="fill_lamp_voltage" :num="equipmentParams.fill_lamp_voltage" @numberInputValueChange="numberInputValueChange"></MetaNumberInput>
                </div>
                <div class="equipmentOParams_itemBg">
                  <div class="equipmentOParams_itemTitle">增益</div>
                  <MetaNumberInput :disabled="btnClickType !== 'params'" :min="0" :max="6" unit="倍" paramKey="data_value_gain" :num="equipmentParams.data_value_gain" @numberInputValueChange="numberInputValueChange"></MetaNumberInput>
                </div>
                <div class="equipmentOParams_itemBg">
                  <div class="equipmentOParams_itemTitle">短波积分</div>
                  <MetaNumberInput :disabled="btnClickType !== 'params'" unit="ms" paramKey="shot_wave_integral" :num="equipmentParams.shot_wave_integral" @numberInputValueChange="numberInputValueChange"></MetaNumberInput>
                </div>
                <div class="equipmentOParams_itemBg">
                  <div class="equipmentOParams_itemTitle">偏压</div>
                  <MetaNumberInput :disabled="btnClickType !== 'params'" unit="mV" paramKey="power_supply_bias" :num="equipmentParams.power_supply_bias" @numberInputValueChange="numberInputValueChange"></MetaNumberInput>
                </div>
              </div>
            </div>
            <div class="equipmentO_optionBtn">
              <!-- 暗电流定标 -->
              <div class="optionBtn_adl" @click="onOptionBtnClick('adl')" :style="btnClickType == 'adl' ? 'background-color: #114ca6' : 'background-color: #51bbea;'"></div>
              <div class="optionBtn_adlCover"></div>
              <!-- 标准板定标 -->
              <div class="optionBtn_bzb" @click="onOptionBtnClick('bzb')" :style="btnClickType == 'bzb' ? 'background-color: #114ca6' : 'background-color: #51bbea;'"></div>
              <div class="optionBtn_bzbCover"></div>
              <!-- 样品采集 -->
              <div class="optionBtn_dc" @click="onOptionBtnClick('dc')" :style="btnClickType == 'dc' ? 'background-color: #114ca6' : 'background-color: #51bbea;'"></div>
              <div class="optionBtn_dcCover"></div>
              <!-- 定时按钮 -->
              <div class="optionBtn_ds" @click="onOptionBtnClick('ds')" :style="btnClickType == 'ds' ? 'background-color: #114ca6' : 'background-color: #51bbea;'"></div>
              <div class="optionBtn_dsCover"></div>
              <!-- 参数配置 -->
              <div class="optionBtn_paramSet" @click="onOptionBtnClick('params')" :style="btnClickType == 'params' ? 'background-color: #114ca6' : 'background-color: #51bbea;'"></div>
              <div class="optionBtn_paramSetCover"></div>

              <div class="equipmentO_equipmentImgArea">
                <div class="equipmentO_equipmentImgBg">
                  <img v-if="equipmentStatusNow == '10'" src="@/assets/images/v3/equipment_o.png" class="equipmentO_equipmentImg_o">
                  <img v-else src="@/assets/images/v3/equipment.png" class="equipmentO_equipmentImg">
                </div>
                <el-tooltip v-if="equipmentStatusNow == '20' && parseFloat(roleInfoItem.version) >= 3" content="电磁锁" placement="bottom" effect="light" popper-class="equipmentO_lockBtnPop">
                  <!-- <el-button v-if="equipmentStatusNow == '20'" type="danger" icon="el-icon-unlock" circle class="equipmentO_lockBtn"></el-button> -->
                  <div class="equipmentO_lockBtn" @click="doOpenLock"></div>
                </el-tooltip>
                <img v-if="lightSource == '1'" src="@/assets/images/v3/equipment_light.png" class="equipmentO_equipmentLight">
              </div>
              <div class="equipmentO_btnTextCover"></div>
            </div>
            <div class="equipmentO_collectionParams">
              <div :class="btnClickType == 'ds' ? 'equipmentOCollectionParams_upBg equipmentOCollectionParams_upBgImg_o' : 'equipmentOCollectionParams_upBg equipmentOCollectionParams_upBgImg'">
                <div class="equipmentOCollectionParams_title">
                  <img class="equipmentOCollectionParams_titleImg" src="~@/assets/images/v3/clock.png">
                  <div class="equipmentOCollectionParams_titleText">起始时间</div>
                </div>
                <div class="equipmentOCollectionParams_bg">
                  <div class="equipmentOCollectionParams_startTimeBg">
                    <el-date-picker class="equipmentOCollectionParams_startTime" v-model="startTime" type="datetime" placeholder="请选择开始时间" value-format="yyyy-MM-dd HH:mm:ss" size="mini" :disabled="btnClickType !== 'ds'"></el-date-picker>
                  </div>
                  <div class="equipmentOCollectionParams_dsTimeInterval">
                    <div class="equipmentOCollectionParams_title">
                      <img class="equipmentOCollectionParams_titleImg" src="~@/assets/images/v3/interval.png">
                      <div class="equipmentOCollectionParams_titleText">时间间隔</div>
                    </div>
                    <div class="equipmentOCollectionParams_dsInterval">
                      <MetaNumberInput :disabled="btnClickType !== 'ds'" :min="minInterval" unit="min" paramKey="interval" :num="interval" @numberInputValueChange="numberInputValueChange"></MetaNumberInput>
                    </div>
                  </div>
                  <div class="equipmentOCollectionParams_dsFrequency">
                    <div class="equipmentOCollectionParams_title">
                      <img class="equipmentOCollectionParams_titleImg" src="~@/assets/images/v3/frequency.png">
                      <div class="equipmentOCollectionParams_titleText">采集频次（点击切换）</div>
                    </div>
                    <div class="equipmentOCollectionParams_frequencyTypeBg">
                      <img v-if="dsType == '20'" src="@/assets/images/v3/dsTypeBtn_yx.png" class="equipmentOCollectionParams_frequencyType" @click="changeFrequencyType('10')" :style="btnClickType == 'ds' ? 'cursor: pointer;' : ''">
                      <img v-else src="@/assets/images/v3/dsTypeBtn_lx.png" class="equipmentOCollectionParams_frequencyType" @click="changeFrequencyType('20')" :style="btnClickType == 'ds' ? 'cursor: pointer;' : ''">
                      <div class="equipmentOCollectionParams_frequencyTypeText">{{ dsType == '20' ? '有限' : '连续' }}</div>
                    </div>
                    <div v-if="dsType == '20'" class="equipmentOCollectionParams_frequencyTimesBg">
                      <MetaNumberInput :disabled="btnClickType !== 'ds'" :min="1" unit="次" paramKey="cjTimes" :num="cjTimes" @numberInputValueChange="numberInputValueChange"></MetaNumberInput>
                    </div>
                    <div v-else class="equipmentOCollectionParams_modelChooseBg">
                      <div v-if="roleInfoItem.version != '2.4'" class="equipmentOCollectionParams_modelBtnBg">
                        <div v-if="workModel == '02'" class="equipmentOCollectionParams_modelBtn equipmentOCollectionParams_model_o" :style="btnClickType !== 'ds' ? 'cursor: not-allowed' : ''">全休眠模式</div>
                        <div v-else class="equipmentOCollectionParams_modelBtn equipmentOCollectionParams_model" :style="btnClickType !== 'ds' ? 'cursor: not-allowed' : 'cursor: pointer'" @click="workModelChoose('02')">全休眠模式</div>
                      </div>
                      <div v-if="roleInfoItem.version != '2.4' && roleInfoItem.version != '3.1'" class="equipmentOCollectionParams_modelBtnBg">
                        <div v-if="workModel == '01'" class="equipmentOCollectionParams_modelBtn equipmentOCollectionParams_model_o" :style="btnClickType !== 'ds' ? 'cursor: not-allowed' : ''">半休眠模式</div>
                        <div v-else class="equipmentOCollectionParams_modelBtn equipmentOCollectionParams_model" :style="btnClickType !== 'ds' ? 'cursor: not-allowed' : 'cursor: pointer'" @click="workModelChoose('01')">半休眠模式</div>
                      </div>
                      <div class="equipmentOCollectionParams_modelBtnBg">
                        <div v-if="workModel == '00'" class="equipmentOCollectionParams_modelBtn equipmentOCollectionParams_model_o" :style="btnClickType !== 'ds' ? 'cursor: not-allowed' : ''">全功率模式</div>
                        <div v-else class="equipmentOCollectionParams_modelBtn equipmentOCollectionParams_model" :style="btnClickType !== 'ds' ? 'cursor: not-allowed' : 'cursor: pointer'" @click="workModelChoose('00')">全功率模式</div>
                      </div>
                      <div v-if="roleInfoItem.version != '2.4' && roleInfoItem.version != '3.1'" class="equipmentOCollectionParams_modelBtnBg">
                        <div v-if="workModel == '03'" class="equipmentOCollectionParams_modelBtn equipmentOCollectionParams_model_o" :style="btnClickType !== 'ds' ? 'cursor: not-allowed' : ''">全自动模式</div>
                        <div v-else class="equipmentOCollectionParams_modelBtn equipmentOCollectionParams_model" :style="btnClickType !== 'ds' ? 'cursor: not-allowed' : 'cursor: pointer'" @click="workModelChoose('03')">全自动模式</div>
                      </div>
                    </div>
                  </div>
                  <div v-if="workModel == '03' && dsType == '10'" class="equipmentOCollectionParams_autoParamsBg">
                    <img src="@/assets/images/v3/voltageThreshold.png" class="equipmentOCollectionParams_autoParamsLogo">
                    <div class="equipmentOCollectionParams_autoParamsTitle">电压阈值</div>
                    <div class="equipmentOCollectionParams_autoParamsText">下限:</div>
                    <el-input-number size="mini" v-model="voltageDown" class="equipmentOCollectionParams_autoParamsInput" :disabled="btnClickType !== 'ds'"></el-input-number>
                    <div class="equipmentOCollectionParams_autoParamsText">上限:</div>
                    <el-input-number size="mini" v-model="voltageUp" class="equipmentOCollectionParams_autoParamsInput" :disabled="btnClickType !== 'ds'"></el-input-number>
                    <div></div>
                  </div>
                </div>
              </div>
              <div :class="btnClickType == 'dc' || btnClickType == 'adl' || btnClickType == 'bzb' || btnClickType == 'ds' ? 'equipmentOCollectionParams_downBg equipmentOCollectionParams_downBgImg_o' : 'equipmentOCollectionParams_downBg equipmentOCollectionParams_downBgImg'">
                <div class="equipmentOCollectionParams_down">
                  <div class="equipmentOCollectionParams_dcBg">
                    <div class="equipmentOCollectionParamsDc_item">
                      <div class="equipmentOCollectionParams_title">
                        <img class="equipmentOCollectionParams_titleImg" src="~@/assets/images/v3/singleTimes.png">
                        <div class="equipmentOCollectionParams_titleText">光谱条数/次</div>
                      </div>
                      <div class="equipmentOCollectionParamsDc_singleTimes">
                        <MetaNumberInput :disabled="btnClickType == '' || btnClickType == 'params' || equipmentStatusNow == '10'" :min="1" unit="条" paramKey="singleTimes" :num="singleTimes" @numberInputValueChange="numberInputValueChange"></MetaNumberInput>
                      </div>
                    </div>
                    <div class="equipmentOCollectionParamsDc_item">
                      <div class="equipmentOCollectionParams_title">
                        <img class="equipmentOCollectionParams_titleImg" src="~@/assets/images/v3/remark.png">
                        <div class="equipmentOCollectionParams_titleText">采集备注</div>
                      </div>
                      <div class="equipmentOCollectionParamsDc_remark">
                        <el-input :disabled="btnClickType == 'params'" class="equipmentOCollectionParamsDc_remarkInput" placeholder="请输入备注" v-model="cjRemark"></el-input>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="equipmentO_doCollectionBtnArea">
              <div class="equipmentODoCollectionBtn_item">
                <div v-if="equipmentStatusNow == '20'" class="equipmentODoCollectionBtn_start" @click="doOption"></div>
                <div v-else class="equipmentODoCollectionBtn_startUn"></div>
              </div>
              <div class="equipmentODoCollectionBtn_item">
                <!-- 1连续采集关，2连续采集开，3样品采集，4暗电流，5标准板，6定时关，7定时开 -->
                <div v-if="collectionType == '7'" class="equipmentODoCollectionBtn_canStop" @click="stopDsOption"></div>
                <div v-else-if="collectionType == '2' || collectionType == '3' || collectionType == '4' || collectionType == '5'" class="equipmentODoCollectionBtn_canStop" @click="stopDcOption"></div>
                <div v-else class="equipmentODoCollectionBtn_stop"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="equipmentO_echartsArea">
          <div class="equipmentO_echartsDndataBg">
            <div ref="dnChart" class="equipmentO_echartsDndata"></div>
          </div>
          <div class="equipmentO_echartsReflectivityBg">
            <div ref="reflectivityChart" class="equipmentO_echartsReflectivity"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MetaTreeList from '../components/MetaTreeList'
import MetaNumberInput from '../components/MetaNumberInput'
import deepClone from '../utils/deepClone'
import utils from '../utils/utils'
export default {
  name: 'equipmentOption',
  components: {
    MetaTreeList,
    MetaNumberInput
  },
  data () {
    return {
      roleInfoItem: {},
      treeIcon: require("@/assets/images/v3/equipmentTreeIcon.png"),
      ws: null,
      username: '',
      dnChart: null,
      reflectivityChart: null,
      defaultProps: {
        children: 'list',
        label: 'name'
      },
      equTreeData: [],
      btnClickType: '',
      minInterval: 5,
      startTime: '', // 起始时间
      interval: 30,
      cjTimes: 1,
      dsType: '10', // 10 - 连续采集 ，20 - 设置采集次数
      equipmentStatusNow: '0',
      lightSource: '1', // 1开2关
      workModel: '00', //全功率模式
      realWorkModel: '',
      voltageDown: 9, //电压阈值
      voltageUp: 10, //电压阈值
      equipmentParams: {
        visible_light_integral: 0,
        shot_wave_integral: 0,
        fill_lamp_voltage: 0,
        data_value_gain: 0,
        power_supply_bias: 0
      },
      collectionType: 0,
      cjRemark: '',
      singleTimes: 5,
      equipmentOnType: '', //1在线2调试3维修4报警
      equipmentVoltage: '', //设备电量
      xmStatus: ''
    }
  },
  created() {
    this.initWebsocket()
  },
  mounted() {
    this.initEquipmentData()
  },
  destroyed() {
    if(this.ws) {
      this.ws.close()
      this.ws = null
    }
  },
  methods: {
    initWebsocket() {
      let _this = this
      _this.username = localStorage.getItem('username')
      if ('WebSocket' in window) {
        // 打开一个 web socket
        let ws = new WebSocket(process.env.PROGOO_SOCKET + `ws/${_this.username}`)
        _this.ws = ws
        ws.onopen = function() {
          // Web Socket 已连接上，使用 send() 方法发送数据
          _this.$message({
            message: '设备通讯连接成功',
            type: 'success'
          });
        }
        ws.onmessage = function(evt) {
          try {
            let msg = JSON.parse(evt.data)
            _this.websocketMsgHandle(msg)
          } catch (error) {
            console.log('不是个json对象')
          }
        }
        ws.onclose = function() {
          // 关闭 websocket
        }
        ws.onerror = function() {
          _this.$message.error('设备通讯连接已断开')
        }
      } else {
        // 浏览器不支持 WebSocket
        alert('您的浏览器不支持 WebSocket!')
      }
    },
    websocketMsgHandle(msg) {
      console.log(msg)
      if(msg.type === 13) {
        if(msg.fixed_type_list && msg.fixed_type_list.length > 0) {
          if(msg.fixed_type_list[0].equipmentId === this.roleInfoItem.id) {
            // 1连续采集关，2连续采集开，3样品采集，4暗电流，5标准板，6定时关，7定时开
            if(msg.fixed_type_list[0].panel_parameters.collectionType == '2' || msg.fixed_type_list[0].panel_parameters.collectionType == '3' || msg.fixed_type_list[0].panel_parameters.collectionType == '4' || msg.fixed_type_list[0].panel_parameters.collectionType == '5' || msg.fixed_type_list[0].panel_parameters.collectionType == '7') {
              this.equipmentStatusNow = '10'
            }else {
              this.equipmentStatusNow = '20'
            }
            this.collectionType = msg.fixed_type_list[0].panel_parameters.collectionType
            this.equipmentOnType = msg.fixed_type_list[0].panel_parameters.onType
            this.xmStatus = msg.fixed_type_list[0].panel_parameters.xmStatus

            this.lightSource = msg.fixed_type_list[0].panel_parameters.light_source
            this.btnClickType = ''
            this.realWorkModel = msg.fixed_type_list[0].panel_parameters.lastCjModelStatus
          }
        }
      }else if(msg.type === 100) {
        let showData = {}
        if(msg.equipment_type !== '2') {
          showData = msg.fixed_type_list.length > 0 ? msg.fixed_type_list[0] : {}
        }
        if(Object.keys(showData).length > 0) {
          if(showData.equipmentId === this.roleInfoItem.id) {
            for(let i in showData.dataList) {
              let selectItem = {}
              selectItem.value = showData.dataList[i].value
              selectItem.name = showData.dataList[i].name
              selectItem.xData = showData.centralWavelength
              selectItem.yData = showData.dataList[i].arr
              this.chartInit(selectItem)
            }
          }
        }
      }
    },
    initEquipmentData() {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/equipment/userarea",
        method: "post",
        data: {}
      }).then(res => {
        if (res.data.code === 200) {
          this.equTreeData = res.data.result
          let currentDataItem = {}
          for(let i in this.equTreeData) {
            this.equTreeData[i].name = "(" + this.equTreeData[i].area_jc + ")" + this.equTreeData[i].area_name
            this.equTreeData[i].level = 1
            for(let j in this.equTreeData[i].list) {
              if(this.equTreeData[i].list[j].customizeName && this.equTreeData[i].list[j].customizeName !== '') {
                this.equTreeData[i].list[j].name = this.equTreeData[i].list[j].customizeName
              }else {
                this.equTreeData[i].list[j].name = this.equTreeData[i].list[j].equipmentname
              }
              this.equTreeData[i].list[j].level = 2
              for(let key in this.equTreeData[i].list[j].equipmentRecord) {
                //子表中的这些参数不正确，不加入主表。
                if(key === 'aid' || key === 'id' || key === 'eid' || key === 'snid' || key === 'equipment_type') {
                  continue
                }
                this.equTreeData[i].list[j][key] = this.equTreeData[i].list[j].equipmentRecord[key]
              }
              if(Object.keys(this.roleInfoItem).length > 0 && this.roleInfoItem.id === this.equTreeData[i].list[j].id){
                currentDataItem = this.equTreeData[i].list[j]
              }
            }
          }
          if(Object.keys(currentDataItem).length > 0) {
            this.roleInfoItem = deepClone(currentDataItem)

            this.getEqtInfo((status,result) => {
              if(status) {
                // collectionType 1连续采集关，2连续采集开，3样品采集，4暗电流，5标准板，6定时关，7定时开
                if(result.collectionType == '2' || result.collectionType == '3' || result.collectionType == '4' || result.collectionType == '5' || result.collectionType == '7') {
                  this.equipmentStatusNow = '10'
                }else {
                  this.equipmentStatusNow = '20'
                }
                this.collectionType = result.collectionType
                this.equipmentOnType  = result.onType
                this.xmStatus = result.equipmentParams.xmStatus

                this.lightSource = result.collectionParams.lightSource
                this.equipmentParams = deepClone(result.equipmentParams)

                this.equipmentVoltage = result.equipmentParams.electricity && result.equipmentParams.electricity !== '' ? parseFloat(result.equipmentParams.electricity).toFixed(2) : 0

                this.startTime = result.collectionParams.startTime ? new Date(result.collectionParams.startTime) : ''
                this.interval = result.collectionParams.interval ? result.collectionParams.interval : 30
                this.cjTimes = result.collectionParams.frequency != 0 ? result.collectionParams.frequency : 1
                this.dsType = result.collectionParams.frequency == 0 ? '10' : '20'
                this.singleTimes = result.collectionParams.spectralTimes ? result.collectionParams.spectralTimes : '5'

                //版本3.1只支持全休眠模式 3.0支持半休眠模式
                let recommendModel = ''
                if(this.roleInfoItem.version) {
                  if(this.roleInfoItem.version == '3.0') {
                    recommendModel = '03'
                  }else if(this.roleInfoItem.version == '3.1') {
                    recommendModel = '02'
                  }else {
                    recommendModel = '00'
                  }
                }

                this.workModel = result.equipmentParams.cjModel ? result.equipmentParams.cjModel : recommendModel
                if(this.workModel == '00') {
                  this.minInterval = 1
                }else {
                  this.minInterval = 10
                }
                if(this.collectionType == '7' && this.workModel == '03') {
                  this.realWorkModel = result.equipmentParams.lastCjModelStatus ? result.equipmentParams.lastCjModelStatus : ''
                }
                this.voltageUp = result.equipmentParams.voltageUp ? result.equipmentParams.voltageUp : 10
                this.voltageDown = result.equipmentParams.voltageDown ? result.equipmentParams.voltageDown : 9

              }else {
                this.equipmentParams = {
                  visible_light_integral: 0,
                  shot_wave_integral: 0,
                  fill_lamp_voltage: 0,
                  data_value_gain: 0,
                  power_supply_bias: 0
                }
                this.cjRemark = ''
                this.btnClickType = ''
              }
            })

          }else {
            this.roleInfoItem = {}
          }
          // this.$nextTick(() => {
          //   this.$refs.equipmentOption_list.setChoiceRole(this.roleInfoItem)
          // })


        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })
    },
    roloeItemChoose(item) {
      if(item.level === 1) {
        return
      }
      this.roleInfoItem = {}
      this.btnClickType = ''
      this.equipmentVoltage = ''
      this.$nextTick(() => {
        this.roleInfoItem = deepClone(item)
        this.getEqtInfo((status,result) => {
          if(status) {
            // 1连续采集关，2连续采集开，3样品采集，4暗电流，5标准板，6定时关，7定时开
            if(result.collectionType == '2' || result.collectionType == '3' || result.collectionType == '4' || result.collectionType == '5' || result.collectionType == '7') {
              this.equipmentStatusNow = '10'
            }else {
              this.equipmentStatusNow = '20'
            }

            this.collectionType = result.collectionType
            this.equipmentOnType  = result.onType

            this.lightSource = result.collectionParams.lightSource
            this.equipmentParams = deepClone(result.equipmentParams)

            this.xmStatus = result.equipmentParams.xmStatus

            this.equipmentVoltage = result.equipmentParams.electricity && result.equipmentParams.electricity !== '' ? parseFloat(result.equipmentParams.electricity).toFixed(2) : 0

            this.startTime = result.collectionParams.startTime ? new Date(result.collectionParams.startTime) : ''
            this.interval = result.collectionParams.interval ? result.collectionParams.interval : 30
            this.cjTimes = result.collectionParams.frequency != 0 ? result.collectionParams.frequency : 1
            this.dsType = result.collectionParams.frequency == 0 ? '10' : '20'
            this.singleTimes = result.collectionParams.spectralTimes ? result.collectionParams.spectralTimes : '5'

            //版本3.1只支持全休眠模式 3.0支持半休眠模式
            let recommendModel = ''
            if(this.roleInfoItem.version) {
              if(this.roleInfoItem.version == '3.0') {
                recommendModel = '03'
              }else if(this.roleInfoItem.version == '3.1') {
                recommendModel = '00'
              }else {
                recommendModel = '02'
              }
            }

            this.workModel = result.equipmentParams.cjModel ? result.equipmentParams.cjModel : recommendModel
            if(this.workModel == '00') {
              this.minInterval = 1
            }else {
              this.minInterval = 10
            }
            if(this.collectionType == '7' && this.workModel == '03') {
              this.realWorkModel = result.equipmentParams.lastCjModelStatus ? result.equipmentParams.lastCjModelStatus : ''
            }
            this.voltageUp = result.equipmentParams.voltageUp ? result.equipmentParams.voltageUp : 10
            this.voltageDown = result.equipmentParams.voltageDown ? result.equipmentParams.voltageDown : 9

          }else{
            this.equipmentParams = {
              visible_light_integral: 0,
              shot_wave_integral: 0,
              fill_lamp_voltage: 0,
              data_value_gain: 0,
              power_supply_bias: 0
            }
            this.cjRemark = ''
            this.btnClickType = ''
          }
        })
      })
    },
    getEqtInfo(callback) {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/equipment/getEqtInfo?snid=" + this.roleInfoItem.snid,
        method: "post",
        data: {}
      }).then(res => {
        if (res.data.code === 200) {
          if(res.data.result.code && res.data.result.code == 400) {
            this.$notify.error({
              title: '错误',
              message: res.data.result.message
            });
            this.equipmentStatusNow = '0'
            callback(false)
          }else {
            if(callback && typeof(callback) === 'function') {
              callback(true, res.data.result)
            }
          }
        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })
    },
    onOptionBtnClick(type) {
      if(this.equipmentStatusNow !== '20') {
        return
      }
      if(this.btnClickType !== type) {
        this.btnClickType = type
      }else {
        this.btnClickType = ''
      }
    },
    workModelChoose(model) {
      /* *
       * '02' > 全休眠模式
       * '01' > 半休眠模式
       * '00' > 全功率模式
       * '03' > 全自动模式
       */
      if(this.btnClickType === 'ds') {
        if(this.workModel !== model) {
          this.workModel = model
          if(this.workModel == '00') {
            this.minInterval = 1
          }else if(this.workModel == '01' || this.workModel == '02' || this.workModel == '03') {
            if(this.interval < 10) {
              this.interval = 10
            }
            this.minInterval = 10
          }
        }
      }
    },
    changeFrequencyType(type) {
      if(this.btnClickType == 'ds') {
        this.dsType = type
        if(this.dsType == '20') {
          this.workModel = '00'
          this.minInterval = 1
        }
      }
    },
    doOpenLock() {
      //TODO 电磁锁开锁
      this.$confirm('是否确认开启电磁锁？请避免误操作。（电磁锁开启后会在10秒后自动关闭）', '确认开启电磁锁', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.getEqtInfo((status,result) => {
          if(status) {
            let msgJson = {
              snid: this.roleInfoItem.snid,
              type: 'open',
            }
            this.$fetch({
              url: process.env.PROGOO_GATE_WATER + "admin/equipment/control?userName=" + localStorage.getItem("username"),
              method: "post",
              data: msgJson
            }).then(res => {
              if (res.data.code === 200) {
                this.$message({
                  message: '操作成功',
                  type: 'success'
                });
              }else {
                this.$notify.error({
                  title: '错误',
                  message: res.data.message
                });
              }
            })
          }
        })
      })
    },
    doOption() {
      if(this.btnClickType && this.btnClickType !== '') {
          this.getEqtInfo((status,result) => {
            if(status) {
              // 1连续采集关，2连续采集开，3样品采集，4暗电流，5标准板，6定时关，7定时开
              let equipmentStatusNow = ''
              // 00 在线 10半休眠 20全休眠
              let xmStatus = result.equipmentParams.xmStatus && result.equipmentParams.xmStatus != '' ? result.equipmentParams.xmStatus : ''
              if(result.onType == '2') {
                this.$notify({
                  title: '警告',
                  message: '当前设备不在线，请稍后再试',
                  type: 'warning'
                });
                return
              }

              if(result.collectionType == '2' || result.collectionType == '3' || result.collectionType == '4' || result.collectionType == '5' || result.collectionType == '7') {
                equipmentStatusNow = '10'
              }else {
                equipmentStatusNow = '20'
              }
              if(equipmentStatusNow !== '20') {
                this.$notify({
                  title: '警告',
                  message: '当前设备正在采集，请刷新状态，稍后再试',
                  type: 'warning'
                });
                return
              }else {
                if(parseFloat(this.roleInfoItem.version) >= 3) {
                  if(xmStatus == '10') {
                    this.$notify({
                      title: '警告',
                      message: '当前设备正在休眠唤醒中，请稍后再试',
                      type: 'warning'
                    });
                    return
                  }else if(xmStatus == '20') {
                    this.$notify({
                      title: '警告',
                      message: '当前设备正在充电，请稍后再试',
                      type: 'warning'
                    });
                    return
                  }
                }
              }
              if(this.btnClickType == 'params') {
                this.$confirm('确认变更设备参数？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  let is_data_value_gain = '0'
                  let is_fill_lamp_voltage = '0'
                  let is_power_supply_bias = '0'
                  let is_shot_wave_integral = '0'
                  let is_visible_light_integral = '0'
                  if(this.equipmentParams.visible_light_integral != result.equipmentParams.visible_light_integral) {
                    is_visible_light_integral = '1'
                  }
                  if(this.equipmentParams.fill_lamp_voltage != result.equipmentParams.fill_lamp_voltage) {
                    is_fill_lamp_voltage = '1'
                  }
                  if(this.equipmentParams.shot_wave_integral != result.equipmentParams.shot_wave_integral) {
                    is_shot_wave_integral = '1'
                  }
                  if(this.equipmentParams.data_value_gain != result.equipmentParams.data_value_gain) {
                    is_data_value_gain = '1'
                  }
                  if(this.equipmentParams.power_supply_bias != result.equipmentParams.power_supply_bias) {
                    is_power_supply_bias = '1'
                  }

                  this.$fetch({
                    url: process.env.PROGOO_GATE_WATER + "admin/equipment/infoEdit",
                    method: "post",
                    data: {
                      snid: this.roleInfoItem.snid,
                      data_value_gain: this.equipmentParams.data_value_gain,
                      fill_lamp_voltage: this.equipmentParams.fill_lamp_voltage,
                      power_supply_bias: this.equipmentParams.power_supply_bias,
                      shot_wave_integral: this.equipmentParams.shot_wave_integral,
                      visible_light_integral: this.equipmentParams.visible_light_integral,
                      is_data_value_gain: is_data_value_gain,
                      is_fill_lamp_voltage: is_fill_lamp_voltage,
                      is_power_supply_bias: is_power_supply_bias,
                      is_shot_wave_integral: is_shot_wave_integral,
                      is_visible_light_integral: is_visible_light_integral
                    }
                  }).then(res => {
                    if(res.data.code == 200) {
                      this.$message({
                        message: '保存成功',
                        type: 'success'
                      });
                    }
                  })
                })
              }else if(this.btnClickType == 'dc' || this.btnClickType == 'bzb' || this.btnClickType == 'adl') {
                let confirmText = ''
                let msgJson = {
                  snid: this.roleInfoItem.snid,
                  type: this.btnClickType,
                  seconds: 2,//开灯时间  2.4以下版本设备使用
                  version: this.roleInfoItem.version,
                  remark: this.cjRemark,
                  cjModel: '00'
                }
                if(this.btnClickType == 'dc') {
                  confirmText = '样品采集'
                  msgJson.times = this.singleTimes && this.singleTimes !== '' && this.singleTimes !== 0 ? this.singleTimes : 5
                }else if(this.btnClickType == 'bzb') {
                  msgJson.dbTimes = this.singleTimes && this.singleTimes !== '' && this.singleTimes !== 0 ? this.singleTimes : 5
                  confirmText = '标准板定标'
                }else if(this.btnClickType == 'adl') {
                  msgJson.dbTimes = this.singleTimes && this.singleTimes !== '' && this.singleTimes !== 0 ? this.singleTimes : 5
                  confirmText = '暗电流定标'
                }
                this.$confirm('确认执行' + confirmText +'？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  this.$fetch({
                    url: process.env.PROGOO_GATE_WATER + "admin/equipment/control?userName=" + localStorage.getItem("username"),
                    method: "post",
                    data: msgJson
                  }).then(res => {
                    if (res.data.code === 200) {
                      this.$message({
                        message: '操作成功',
                        type: 'success'
                      });
                    }else {
                      this.$notify.error({
                        title: '错误',
                        message: res.data.message
                      });
                    }
                  })
                })
              }else if(this.btnClickType == 'ds') {
                /* *
                 * '02' > 全休眠模式
                 * '01' > 半休眠模式
                 * '00' > 全功率模式
                 * '03' > 全自动模式
                 */
                let content = ''
                if(this.workModel == '00') {
                  content = "全功率模式即设备所有模块持续供电，需确保电量充足，是否确认执行全功率定时采集？"
                }else if(this.workModel == '01') {
                  content = "半休眠模式即设备在采集后进入部分模块休眠，以保证设备正常充电效率，休眠期间可人为唤醒，是否确认执行半休眠定时采集？"
                }else if(this.workModel == '02') {
                  content = "全休眠模式即设备在采集后所有模块进入休眠状态，直到下一次采集自动唤醒，休眠期间无法人为唤醒，是否确认执行全休眠定时采集？"
                }else if(this.workModel == '03') {
                  content = "全自动模式即设备根据所设置的电压阈值自动匹配采集模式，以确保稳定充电，是否确认执行全自动定时采集？（推荐）"
                }
                this.$confirm(content, '确认执行定时采集？', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  if(this.startTime === '') {
                    this.$notify({
                      title: '警告',
                      message: '请选择采集开始时间',
                      type: 'warning'
                    });
                    return
                  }
                  let nowTimes = parseInt(new Date().getTime() / 1000 / 60)
                  let chooseTimes = parseInt(new Date(this.startTime).getTime() / 1000 / 60)
                  if(chooseTimes < nowTimes) {
                    this.$notify.error({
                      title: '错误',
                      message: "定时采集时间不可早于当前时间"
                    });
                    return
                  }
                  if(this.workModel == '03' && this.voltageUp <= this.voltageDown) {
                    this.$notify({
                      title: '警告',
                      message: '电压阈值设定有误，请重新设置',
                      type: 'warning'
                    });
                    return
                  }

                  let msgJson = {
                    snid: this.roleInfoItem.snid,
                    type: 'ds',
                    seconds: 2,//开灯时间  2.4以下版本设备使用
                    version: this.roleInfoItem.version,
                    remark: this.cjRemark,
                    time: this.interval,
                    startTime: utils.formatDate('yyyy-MM-dd hh:mm:ss',new Date(this.startTime)),
                    times: this.singleTimes
                  }
                  msgJson.xmTime = parseInt(this.interval) - 5
                  if(this.dsType == '10') {
                    msgJson.count = 0
                    msgJson.cjModel = this.workModel
                  }else {
                    msgJson.count = this.cjTimes
                    msgJson.cjModel = '00'
                  }
                  if(this.workModel == '03') {
                    msgJson.voltageUp = this.voltageUp
                    msgJson.voltageDown = this.voltageDown
                  }
                  this.$fetch({
                    url: process.env.PROGOO_GATE_WATER + "admin/equipment/control?userName=" + localStorage.getItem("username"),
                    method: "post",
                    data: msgJson
                  }).then(res => {
                    if (res.data.code === 200) {
                      this.$message({
                        message: '操作成功',
                        type: 'success'
                      });
                    }else {
                      this.$notify.error({
                        title: '错误',
                        message: res.data.message
                      });
                    }
                  })
                })
              }
            }
          })
      }else {
        this.$notify({
          title: '警告',
          message: '请选择操作项',
          type: 'warning'
        });
      }
    },
    stopDcOption() {
      this.$confirm('确认停止采集？如果设备正在采集会完成当前采集后自动停止', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let msgJson = {
          snid: this.roleInfoItem.snid,
          type: 'stop',
          version: this.roleInfoItem.version,
        }
        this.$fetch({
          url: process.env.PROGOO_GATE_WATER + "admin/equipment/control?userName=" + localStorage.getItem("username"),
          method: "post",
          data: msgJson
        }).then(res => {
          if (res.data.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
          }else {
            this.$notify.error({
              title: '错误',
              message: res.data.message
            });
          }
        })
      })
    },
    stopDsOption() {
      this.$confirm('确认停止定时采集？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let msgJson = {
          snid: this.roleInfoItem.snid,
          type: 'timeStop',
          version: this.roleInfoItem.version,
        }
        this.$fetch({
          url: process.env.PROGOO_GATE_WATER + "admin/equipment/control?userName=" + localStorage.getItem("username"),
          method: "post",
          data: msgJson
        }).then(res => {
          if (res.data.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
          }else {
            this.$notify.error({
              title: '错误',
              message: res.data.message
            });
          }
        })
      })
    },
    numberInputValueChange(res) {
      if(res.key == 'singleTimes') {
        this.singleTimes = res.value
      }else if(res.key == 'interval'){
        this.interval = res.value
      }else if(res.key == 'cjTimes'){
        this.cjTimes = res.value
      }else {
        this.equipmentParams[res.key] = res.value
      }
    },
    equipmentParamsRefresh() {
      // 获取设备参数信息（可见光积分、补光灯电压、短波积分、增益、偏压）LDC
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/equipment/infoBySid",
        method: "post",
        data: {
          snid: this.roleInfoItem.snid
        }
      }).then(res => {
        if(res.data.code == 200) {
          if(res.data.result.code && res.data.result.code == 400) {
            this.$notify.error({
              title: '错误',
              message: res.data.result.message
            });
            this.equipmentParams = {
              visible_light_integral: 0,
              shot_wave_integral: 0,
              fill_lamp_voltage: 0,
              data_value_gain: 0,
              power_supply_bias: 0
            }
            return
          }
          this.equipmentParams.visible_light_integral = res.data.result.visible_light_integral ? res.data.result.visible_light_integral : 0
          this.equipmentParams.fill_lamp_voltage = res.data.result.fill_lamp_voltage ? res.data.result.fill_lamp_voltage : 0
          this.equipmentParams.shot_wave_integral = res.data.result.shot_wave_integral ? res.data.result.shot_wave_integral : 0
          this.equipmentParams.data_value_gain = res.data.result.data_value_gain ? res.data.result.data_value_gain : 0
          this.equipmentParams.power_supply_bias = res.data.result.power_supply_bias ? res.data.result.power_supply_bias : 0
          this.$message({
            message: '获取成功',
            type: 'success'
          });
        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })
    },
    chartInit(data) {
      let echarts = require('echarts')
      if(data.value === 'dnValue') {
        if(this.$refs['dnChart']) {
          this.dnChart = echarts.init(this.$refs['dnChart'])
          this.dnChart.setOption({
            title: {
              text: 'DN值曲线',
              x:'28',
              y:'8',
              textStyle: {
                color: '#000',
                fontWeight: 'normal',
                fontSize: '18'
              }
            },
            color: ['#F28F9B'],
            tooltip: {
              trigger: 'axis'
            },
            grid: {
              left: '6%',
              bottom: '7%',
              top: '18%',
              height: '70%',
              right: '2%',
              show: true,
              // backgroundColor: '#002738'
              // containLabel: true
            },
            xAxis: {
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: '#000',
                }
              },
              axisLabel: {
                show: true,
                fontSize: 10
              },
              boundaryGap: false,
              data: data.xData
            },
            yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#000'
                }
              },
              axisLabel: {
                show: true,
                fontSize: 10
              },
              splitLine: {
                lineStyle: {
                    color: ['#DFEAFA']
                }
              },
              scale:true
            },
            series: [
              {
                name: data.name,
                type: 'line',
                stack: '总量',
                smooth: true,
                data: data.yData,
                // color: '#000',
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(248,208,137,0.3)'
                  }, {
                    offset: 1,
                    color: '#F8D089'
                  }])
                },
              }
            ]
          })
          this.$nextTick(() => {
            this.dnChart.resize()
          })
        }

      }else if(data.value === 'reflectivity') {
        this.reflectivityChart = echarts.init(this.$refs['reflectivityChart'])
        this.reflectivityChart.setOption({
          title: {
            text: '反射率曲线',
            x:'28',
            y:'8',
            textStyle: {
              color: '#000',
              fontWeight: 'normal',
              fontSize: '18'
            }
          },
          color: ['#9290FF'],
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '6%',
            bottom: '7%',
            top: '18%',
            height: '70%',
            right: '2%',
            show: true,
            // backgroundColor: '#002738'
            // containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#000',
              }
            },
            axisLabel: {
              show: true,
              fontSize: 10
            },
            boundaryGap: false,
            data: data.xData
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#000'
              }
            },
            axisLabel: {
              show: true,
              fontSize: 10
            },
            splitLine: {
              lineStyle: {
                  color: ['#DFEAFA']
              }
            },
            scale:true
          },
          series: [
            {
              name: data.name,
              type: 'line',
              stack: '总量',
              smooth: true,
              data: data.yData,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(162,203,250,0.3)'
                }, {
                  offset: 1,
                  color: '#A2CBFA'
                }])
              },
            }
          ]
        })
        this.$nextTick(() => {
          this.reflectivityChart.resize()
        })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.equipmentOption{
  background-color: #EAECF0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-grow: 1;
  box-sizing: border-box;
  padding: 8px 0 8px 12px;
  // overflow-y: scroll;
  .equipmentOption_treeBg {
    height: 100%;
    background-color: white;
    border-radius: 6px;
    margin-right: 12px;
  }
  .equipmentOption_infoBg {
    height: 100%;
    box-sizing: border-box;
    flex: 1;
    padding-right: 12px;
    overflow-x: scroll;
  }
  .equipmentOption_info {
    width: 100%;
    height: 100%;
    border: 1px solid rgb(228, 234, 236);
    flex: 1;
    min-width: 1360px;
    box-sizing: border-box;
    // background-color: white;
    // padding: 15px;
    .equipmentO_infoTitleBg {
      width: 100%;
      float: left;
      border-radius: 6px;
      // margin-top: 20px;
      padding-bottom: 10px;
      background-color: white;
      padding: 0 28px 10px;
      box-sizing: border-box;
      .equipmentO_infoTitle {
        font-size: 18px;
        float: left;
        height: 45px;
        line-height: 45px;
        width: 100%;
      }
      .equipmentO_infoContent {
        width: 100%;
        float: left;
        .equipmentO_infoItemBg {
          height: 20px;
          float: left;
          padding-left: 75px;
          display: flex;
          align-items: center;
          margin-bottom: 5px;
          .equipmentO_infoItemIconShowName {
            width: 16px;
            height: 15px;
          }
          .equipmentO_infoItemIconName {
            width: 13px;
            height: 14px;
          }
          .equipmentO_infoItemIconSnid {
            width: 16px;
            height: 16px;
          }
          .equipmentO_infoItemText {
            font-size: 16px;
            color: #999;
            margin-left: 8px;
          }
        }
      }
      .equipmentO_delBtn {
        float: right;
      }
    }
    .equipmentO_optionArea {
      width: 100%;
      float: left;
      height: 545px;
      padding: 10px 28px 30px;
      background-color: white;
      margin-top: 10px;
      border-radius: 6px;
      box-sizing: border-box;
      .equipmentO_optionTitle {
        font-size: 18px;
        float: left;
        height: 45px;
        line-height: 45px;
        width: 100%;
      }
      .equipmentO_optionBg {
        width: 100%;
        height: 450px;
        float: left;
        position: relative;
        .equipmentOParams_leftLine {
          width: 150px;
          position: absolute;
          left: 50%;
          margin-left: -325px;
          top: 85px;
        }
        .equipmentO_equipmentParams {
          position: absolute;
          width: calc(50% - 225px);
          height: 100%;
          left: 0;
          box-sizing: border-box;
          padding: 25px 0 17px 75px;
          z-index: 2;
          .equipmentOParams_bg {
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
            box-sizing: border-box;
            padding: 8px 14% 6px 10px;
            .equipmentOParams_title {
              width: 100%;
              height: 28px;
              display: flex;
              align-items: center;
              font-size: 14px;
              color: #114ca6;
              padding: 0 8px;
              box-sizing: border-box;
              background: linear-gradient(90deg,rgba(223,240,253,1), rgba(255,255,255,0));
              .equipmentOParams_refreshIcon {
                cursor: pointer;
                margin-left: 10px;
                font-size: 20px;
              }
            }
            .equipmentOParams_itemBg {
              width: 33.33%;
              height: 154px;
              float: left;
              display: flex;
              flex-direction: column;
              align-items: center;
              .equipmentOParams_itemTitle {
                width: 100%;
                height: 36px;
                margin-top: 32px;
                line-height: 36px;
                font-size: 12px;
                color: #114ca6;
                text-align: center;
              }
            }
          }
          .equipmentOParams_bgImg {
            background-image: url("~@/assets/images/v3/eoParamsBg.png");
          }
          .equipmentOParams_bgImg_o {
            background-image: url("~@/assets/images/v3/eoParamsBg_o.png");
          }
        }
        .equipmentO_optionBtn {
          position: absolute;
          width: 452px;
          height: 452px;
          left: 50%;
          margin-left: -226px;
          .optionBtn_ds{
            position: absolute;
            width: 450px;
            height: 450px;
            clip: rect(0px,225px,225px,0px);
            border-radius: 225px;
            transform: rotate(36deg);
            cursor: pointer;
            top: 50%;
            left: 50%;
            margin-top: -225px;
            margin-left: -225px;
          }
          .optionBtn_dsCover{
            position: absolute;
            width: 452px;
            height: 452px;
            clip: rect(0px,226px,226px,0px);
            border-radius: 226px;
            background-color: white;
            transform: rotate(-36deg);
            top: 50%;
            left: 50%;
            margin-top: -226px;
            margin-left: -226px;
          }
          .optionBtn_paramSet{
            position: absolute;
            width: 450px;
            height: 450px;
            clip: rect(0px,225px,338px,0px);
            border-radius: 225px;
            transform: rotate(-38deg);
            cursor: pointer;
            top: 50%;
            left: 50%;
            margin-top: -225px;
            margin-left: -225px;
          }
          .optionBtn_paramSetCover{
            position: absolute;
            width: 452px;
            height: 452px;
            clip: rect(0px, 226px, 113px, 0px);
            border-radius: 226px;
            background-color: white;
            transform: rotate(-144deg);
            top: 50%;
            left: 50%;
            margin-top: -226px;
            margin-left: -226px;
          }
          .optionBtn_dc {
            position: absolute;
            width: 450px;
            height: 450px;
            clip: rect(0px,225px,225px,0px);
            border-radius: 225px;
            transform: rotate(72deg);
            cursor: pointer;
            top: 50%;
            left: 50%;
            margin-top: -225px;
            margin-left: -225px;
          }
          .optionBtn_dcCover {
            position: absolute;
            width: 452px;
            height: 452px;
            clip: rect(0px,226px,226px,0px);
            border-radius: 226px;
            background-color: white;
            transform: rotate(38deg);
            top: 50%;
            left: 50%;
            margin-top: -226px;
            margin-left: -226px;
          }
          .optionBtn_bzb {
            position: absolute;
            width: 450px;
            height: 450px;
            clip: rect(0px,225px,225px,0px);
            border-radius: 225px;
            transform: rotate(108deg);
            cursor: pointer;
            top: 50%;
            left: 50%;
            margin-top: -225px;
            margin-left: -225px;
          }
          .optionBtn_bzbCover {
            position: absolute;
            width: 452px;
            height: 452px;
            clip: rect(0px,226px,226px,0px);
            border-radius: 226px;
            background-color: white;
            transform: rotate(74deg);
            top: 50%;
            left: 50%;
            margin-top: -226px;
            margin-left: -226px;
          }
          .optionBtn_adl {
            position: absolute;
            width: 450px;
            height: 450px;
            clip: rect(0px,225px,225px,0px);
            border-radius: 225px;
            transform: rotate(144deg);
            cursor: pointer;
            top: 50%;
            left: 50%;
            margin-top: -225px;
            margin-left: -225px;
          }
          .optionBtn_adlCover {
            position: absolute;
            width: 452px;
            height: 452px;
            clip: rect(0px,226px,226px,0px);
            border-radius: 226px;
            background-color: white;
            transform: rotate(110deg);
            top: 50%;
            left: 50%;
            margin-top: -226px;
            margin-left: -226px;
          }
          .equipmentO_equipmentImgArea {
            width: 350px;
            height: 350px;
            border-radius: 350px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -175px;
            margin-left: -175px;
            background-color: white;
            overflow: hidden;
            .equipmentO_equipmentImgBg {
              width: 310px;
              position: absolute;
              height: 310px;
              z-index: 2;
              display: flex;
              justify-content: center;
              align-items: center;
              left: 20px;
              top: 20px;
              border-radius: 310px;
              overflow: hidden;
              box-sizing: border-box;
              padding: 10px;
              pointer-events: none;
              .equipmentO_equipmentImg_o {
                width: 100%;
                animation:pf 2.5s 0s linear infinite;
              }
              @keyframes pf {
                0% {
                  // transform: translateY(0px);
                  transform: rotate(0deg);
                }
                25% {
                  // transform: translateY(-2px);
                  transform: rotate(1.5deg);
                }
                75% {
                  // transform: translateY(2px);
                  transform: rotate(-1.5deg);
                }
                100% {
                  // transform: translateY(0px);
                  transform: rotate(0deg);
                }
              }
              .equipmentO_equipmentImg {
                width: 100%;
              }
            }
            .equipmentO_equipmentLight {
              width: 90px;
              height: 90px;
              position: absolute;
              z-index: 1;
              bottom: 20px;
              left: 50%;
              margin-left: -45px;
            }
            .equipmentO_lockBtn {
              position: absolute;
              top: 6%;
              left: 50%;
              margin-left: -20px;
              z-index: 10;
              width: 50px;
              height: 50px;
              cursor: pointer;
              background-image: url("~@/assets/images/v3/lockBtn.png");
              background-size: 100% 100%;
            }
            .equipmentO_lockBtn:hover {
              background-image: url("~@/assets/images/v3/lockBtn_o.png");
            }
          }
          .equipmentO_btnTextCover {
            width: 450px;
            height: 450px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -225px;
            margin-left: -225px;
            background-image: url('~@/assets/images/v3/eo_optionBtnText.png');
            background-size: 100% 100%;
            pointer-events: none;
          }
        }
        .equipmentOParams_rightDsLine {
          position: absolute;
          width: 176px;
          right: 50%;
          margin-right: -272px;
          top: 32px;
        }
        .equipmentOParams_rightDcLine {
          position: absolute;
          width: 79px;
          right: 50%;
          margin-right: -271px;
          top: 106px;
        }
        .equipmentOParams_rightAdlLine {
          position: absolute;
          width: 97px;
          right: 50%;
          margin-right: -258px;
          bottom: 86px;
        }
        .equipmentOParams_rightBzbLine {
          position: absolute;
          width: 38px;
          right: 50%;
          margin-right: -255px;
          bottom: 120px;
        }
        .equipmentO_collectionParams {
          position: absolute;
          width: calc(50% - 225px);
          height: 100%;
          right: 0;
          box-sizing: border-box;
          padding: 25px 75px 17px 0;
          z-index: 2;
          .equipmentOCollectionParams_upBg {
            width: 100%;
            height: 256px;
            background-size: 100% 100%;
            box-sizing: border-box;
            padding: 8px 10px 6px;
            .equipmentOCollectionParams_bg {
              width: 100%;
              height: 214px;
              box-sizing: border-box;
              padding-left: 11%;
              position: relative;
              .equipmentOCollectionParams_startTimeBg {
                width: 100%;
                height: 57px;
                box-sizing: border-box;
                padding: 10px 24px;
                float: left;
                .equipmentOCollectionParams_startTime {
                  width: 100%!important;
                  height: 100%!important;
                  .el-input__inner {
                    width: 100%!important;
                    height: 100%!important;
                    border-color: #114ca6;
                  }
                }
                .is-disabled {
                  .el-input__inner {
                    border-color: unset;
                  }
                }
              }
              .equipmentOCollectionParams_dsTimeInterval {
                width: 34%;
                height: 158px;
                float: left;
                .equipmentOCollectionParams_dsInterval {
                  width: 100%;
                  height: 102px;
                  float: left;
                  display: flex;
                  justify-content: center;
                  box-sizing: border-box;
                  padding-top: 4px;
                }
              }
              .equipmentOCollectionParams_dsFrequency {
                width: 66%;
                height: 158px;
                float: left;
                .equipmentOCollectionParams_frequencyTypeBg {
                  width: 50%;
                  height: 102px;
                  float: left;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  box-sizing: border-box;
                  padding-top: 4px;
                  .equipmentOCollectionParams_frequencyType {
                    width: 66px;
                    height: 66px;
                  }
                  .equipmentOCollectionParams_frequencyTypeText {
                    width: 100%;
                    font-size: 13px;
                    height: 28px;
                    line-height: 28px;
                    color: #114ca6;
                    text-align: center;
                  }
                }
                .equipmentOCollectionParams_frequencyTimesBg {
                  width: 50%;
                  height: 102px;
                  float: left;
                  display: flex;
                  justify-content: center;
                  box-sizing: border-box;
                  padding-top: 4px;
                }
                .equipmentOCollectionParams_modelChooseBg {
                  width: 50%;
                  height: 102px;
                  float: left;
                  box-sizing: border-box;
                  padding-top: 4px;
                  .equipmentOCollectionParams_modelBtnBg {
                    width: 100%;
                    height: 24px;
                    float: right;
                    .equipmentOCollectionParams_modelBtn {
                      width: 100%;
                      height: 21px;
                      float: right;
                      line-height: 21px;
                      text-align: center;
                      color: #114ca6;
                      font-size: 13px;
                      background-size: 100% 100%;
                    }
                    .equipmentOCollectionParams_model {
                      background-image: url('~@/assets/images/v3/modelBtn.png');
                    }
                    .equipmentOCollectionParams_model_o {
                      background-image: url('~@/assets/images/v3/modelBtn_o.png');
                    }
                  }
                }
              }
              .equipmentOCollectionParams_autoParamsBg {
                width: 89%;
                height: 22px;
                bottom: 2px;
                position: absolute;
                display: flex;
                box-sizing: border-box;
                padding-left: 8px;
                align-items: center;
                .equipmentOCollectionParams_autoParamsLogo {
                  width: 15px;
                  height: 15px;
                  margin-right: 4px;
                }
                .equipmentOCollectionParams_autoParamsTitle {
                  font-size: 12px;
                  color: #114ca6;
                }
                .equipmentOCollectionParams_autoParamsText {
                  font-size: 12px;
                  color: #114ca6;
                  margin-left: 10px;
                }
                .equipmentOCollectionParams_autoParamsInput {
                  width: 74px;
                  height: 20px;
                  .el-input-number__decrease {
                    width: 22px!important;
                    height: 20px!important;
                    line-height: 20px!important;
                  }
                  .el-input-number__increase {
                    width: 22px!important;
                    height: 20px!important;
                    line-height: 20px!important;
                  }
                  .el-input {
                    height: 22px!important;
                    .el-input__inner {
                      height: 22px!important;
                      padding: 0 22px!important;
                      line-height: 22px!important;
                      float: left!important;
                    }
                  }
                }
              }
            }
          }
          .equipmentOCollectionParams_upBgImg {
            background-image: url('~@/assets/images/v3/eoCollectionParamsUp.png');
          }
          .equipmentOCollectionParams_upBgImg_o {
            background-image: url('~@/assets/images/v3/eoCollectionParamsUp_o.png');
          }
          .equipmentOCollectionParams_downBg {
            width: 100%;
            height: 135px;
            margin-top: 17px;
            background-size: 100% 100%;
            .equipmentOCollectionParams_down {
              width: 100%;
              height: 135px;
              box-sizing: border-box;
              padding: 8px 10px 5px;
              float: left;
              .equipmentOCollectionParams_dcBg {
                width: 100%;
                height: 121px;
                padding-left: 11%;
                box-sizing: border-box;
                float: left;
                .equipmentOCollectionParamsDc_item {
                  width: 50%;
                  height: 100%;
                  float: left;
                  .equipmentOCollectionParamsDc_singleTimes {
                    width: 100%;
                    height: 94px;
                    float: left;
                    display: flex;
                    justify-content: center;
                    box-sizing: border-box;
                    padding-top: 8px;
                  }
                  .equipmentOCollectionParamsDc_remark {
                    width: 100%;
                    height: 94px;
                    box-sizing: border-box;
                    padding-top: 18px;
                    float: left;
                    .equipmentOCollectionParamsDc_remarkInput {
                      width: 100%;
                      height: 38px;
                      float: left;
                    }
                  }
                }
              }
            }
          }
          .equipmentOCollectionParams_downBgImg {
            background-image: url('~@/assets/images/v3/eoCollectionParamsdown.png');
          }
          .equipmentOCollectionParams_downBgImg_o {
            background-image: url('~@/assets/images/v3/eoCollectionParamsdown_o.png');
          }
        }
        .equipmentO_doCollectionBtnArea {
          width: 200px;
          height: 65px;
          position: absolute;
          left: 50%;
          margin-left: -100px;
          bottom: 22px;
          box-sizing: border-box;
          padding: 0 16px;
          z-index: 3;
          .equipmentODoCollectionBtn_item {
            width: 50%;
            height: 100%;
            float: left;
            display: flex;
            justify-content: center;
            .equipmentODoCollectionBtn_start {
              height: 100%;
              width: 65px;
              background-size: 100% 100%;
              background-image: url('~@/assets/images/v3/eo_start.png');
              cursor: pointer;
            }
            .equipmentODoCollectionBtn_startUn {
              height: 100%;
              width: 65px;
              background-size: 100% 100%;
              background-image: url('~@/assets/images/v3/eo_start_o.png');
            }
            .equipmentODoCollectionBtn_stop {
              height: 100%;
              width: 65px;
              background-size: 100% 100%;
              background-image: url('~@/assets/images/v3/eo_stopen.png');
            }
            .equipmentODoCollectionBtn_canStop {
              height: 100%;
              width: 65px;
              background-size: 100% 100%;
              background-image: url('~@/assets/images/v3/eo_stopcan.png');
              cursor: pointer;
            }
          }
        }
      }
    }
    .equipmentO_echartsArea {
      width: 100%;
      height: 400px;
      float: left;
      margin-top: 10px;
      .equipmentO_echartsDndataBg {
        box-sizing: border-box;
        width: 50%;
        height: 100%;
        float: left;
        padding-right: 5px;
        .equipmentO_echartsDndata {
          width: 100%;
          height: 100%;
          background: white;
          border-radius: 6px;
        }
      }
      .equipmentO_echartsReflectivityBg {
        box-sizing: border-box;
        width: 50%;
        height: 100%;
        float: left;
        padding-left: 5px;
        .equipmentO_echartsReflectivity {
          width: 100%;
          height: 100%;
          background: white;
          border-radius: 6px;
        }
      }
    }
  }
  .dialogFooter {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
  }
  .equipmentOCollectionParams_title {
    width: 100%;
    height: 28px;
    padding: 0 8px;
    box-sizing: border-box;
    background: linear-gradient(90deg,rgba(223,240,253,1), rgba(255,255,255,0));
    display: flex;
    align-items: center;
    .equipmentOCollectionParams_titleImg {
      width: 16px;
      height: 16px;
    }
    .equipmentOCollectionParams_titleText {
      line-height: 28px;
      font-size: 14px;
      color: #114ca6;
      margin-left: 6px;
    }
  }
}
.equipmentO_lockBtnPop {
  margin-top: 4px!important;
}
</style>
